<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Test 'text-underline-position: auto' with vertical-align. The horizontal
    lines should cross the 'p' letter in word 'ipsum'. None of the numbered
    texts are vertically aligned and the horizontal lines should follow the
    respective baseline of each text, that is, there should be six horizontal
    lines, one for each text, and none of them should be aligned. Bugzilla
    link: http://webkit.org/b/102795.</p>

    <div class="auto">
        <p>&nbsp;1 lorem ipsum&nbsp;&nbsp;
            <span style="vertical-align: 3em;">&nbsp;2 lorem ipsum&nbsp;&nbsp;</span><span style="vertical-align: -2em;">&nbsp;3 lorem ipsum&nbsp;&nbsp;</span><br>
            &nbsp;4 lorem ipsum&nbsp;&nbsp;
            <span style="vertical-align: middle">&nbsp;5 lorem ipsum&nbsp;&nbsp;<span style="vertical-align: middle">&nbsp;6 lorem ipsum&nbsp;&nbsp;</span></span>
        </p>
    </div>
</body>
</html>
